<template>
  <div>
    <el-dialog
      title="右键菜单示例"
      :visible.sync="openDia"
      width="50%"
    >
      <ContextMenu :menu="menu1" @select="menu1Select">
        <div class="menu1"></div>
      </ContextMenu>
      <ContextMenu :menu="menu2" @select="menu2Select">
        <div class="menu2">
          <ContextMenu :menu="menu3" @select="menu3Select">
            <div class="menu3"></div>
          </ContextMenu>
        </div>
      </ContextMenu>
      <span slot="footer">
        <el-button @click="openDia = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ContextMenu from './../../components/ContextMenu'
export default {
  components: {
    ContextMenu
  },
  props: {
    open: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      menu1: [
        {
          label: '鸡蛋',
        },
        {
          label: '火腿',
        },
        {
          label: '菠菜',
        },
      ],
      menu2: [
        {
          label: '手抓饼',
        },
        {
          label: '烤冷面',
        },
      ],
      menu3: [
        {
          label: '煎饼果子',
        },
        {
          label: '热狗',
        },
        {
          label: '章鱼小丸子',
        },
        {
          label: '臭豆腐',
        },
      ],
    }
  },
  computed: {
    openDia: {
      get() {
        return this.open;
      },
      set(val) {
        this.$emit("update:open", val);
      },
    },
  },
  methods: {
    menu1Select(item) {
      this.$message.success(`区域1右键菜单点击:${item.label}`)
    },
    menu2Select(item) {
      this.$message.success(`区域2右键菜单点击:${item.label}`)
    },
    menu3Select(item) {
      this.$message.success(`区域3右键菜单点击:${item.label}`)
    },
  }
}
</script>
<style scoped>
.menu1 {
  width: 100%;
  height: 200px;
  background-color: antiquewhite;
}
.menu2 {
  width: 100%;
  height: 200px;
  background-color: azure;
  .menu3 {
    margin: auto;
    width: 50%;
    height: 100px;
    background-color: burlywood;
  }
}
</style>